<template>
  <el-container v-loading="homeLoading" class="w-100 h-100">
    <Skeleton v-if="homeLoading" />
    <div v-if="!homeLoading" class="wrapper">
      <el-header class="headerHeight">
        <v-header />
      </el-header>
      <el-main>
        <div>
          <template v-if="getTabsType == 'breadcrumb-nav'">
            <el-breadcrumb
              class="breadcrumb-nav flex align-center pl-20 pr-20"
              separator-class="el-icon-arrow-right"
            >
              <el-breadcrumb-item :to="{ name: 'HOME' }">{{ $t('HOME') }}</el-breadcrumb-item>
              <el-breadcrumb-item v-if="$route.meta && $route.meta.parent">{{
                $t($route.meta.parent)
              }}</el-breadcrumb-item>
              <el-breadcrumb-item v-if="$route.name && $route.name != 'HOME'">{{
                $t($route.name)
              }}</el-breadcrumb-item>
            </el-breadcrumb>
          </template>
          <template v-if="getTabsType == 'tab-nav'">
            <TagsView :visited-views="getActivedTabs" :get-current-tab="getCurrentTab" />
          </template>
        </div>
        <div
          class="pl-10 pr-10 pt-10 pb-10 flex-1"
          :class="curRoute === 'HOME' ? 'home-box' : 'content-box'"
        >
          <keep-alive :include="['Home']">
            <router-view />
          </keep-alive>
          <div class="border-content" />
        </div>
      </el-main>
    </div>
    <AlarmNotify v-show="notifyVisiable" />
  </el-container>
</template>

<script>
  import { mapGetters } from 'vuex'
  import vHeader from './Header'
  import Skeleton from './Skeleton'
  import TagsView from './TagsView'
  import AlarmNotify from './AlarmNotify'

  export default {
    components: { vHeader, Skeleton, TagsView, AlarmNotify },
    data() {
      return {
        editableTabsValue: this.getCurrentTab,
        curRoute: 'HOME'
      }
    },
    computed: {
      ...mapGetters([
        'homeLoading',
        'getActivedTabs',
        'getCurrentTab',
        'getTabsType',
        'systemAlert'
      ]),
      notifyVisiable() {
        return this.$route.name !== 'HOME' && this.systemAlert
      }
    },
    watch: {
      getCurrentTab: {
        handler(newval, oldval) {
          this.editableTabsValue = newval
        },
        immediate: true
      },
      $route: {
        handler(newval, oldval) {
          this.curRoute = newval.name
        },
        immediate: true
      }
    },
    created() {},
    methods: {}
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/mixin.module.scss';
  .headerHeight {
    background-color: #242f42;
    color: #ffffff;
    line-height: 78px;
    height: 78px !important;
    padding: 0;
    overflow: hidden;
  }

  .el-main {
    flex-basis: 0px;
    padding: 0;
    overflow: hidden;
    height: calc(100vh - 78px);
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
  }
  .breadcrumb-nav {
    border: 1px solid transparent;
    height: 41px;
  }
  .home-box {
    height: 1px;
    flex: 1;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    @include themeify {
      background-color: themed('homeBgColor');
    }
  }
  .tabs-nav {
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    ::v-deep .el-tabs__item {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
    }
  }
  .content-box {
    width: calc(100% - 20px);
    margin: 10px auto 20px;
    box-shadow: transparent 0px 0px 40px inset;
    border: 1px solid transparent;
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 1px;
    flex: 1;
    > div:first-child {
      height: 100%;
      flex: 1;
    }
  }
</style>
